import { createElement, render,renderDOM } from './element'
import diff from './diff'
import patch from './patch'

// ReactDOM.createRoot(document.getElementById('root')).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// )



// 跳过JSX -> 编译过程  
{/* <ul className="list">
  <li className="item">周杰伦</li>
  <li className="item">王俊凯</li>
  <li className="item">王力宏</li>
</ul> */}
let VirtualDOM = createElement('ul',{class:'list',value:2},[
  createElement('li',{class:'item'},['周杰伦']),
  createElement('li',{class:'item'},['王俊凯']),
  createElement('li',{class:'item'},['王力宏'])
])


let virtualDOM2 = createElement('ul',{class:'list-group'},[
  createElement('li',{class:'item'},['周杰']),
  createElement('li',{class:'item'},['王凯旋']),
  createElement('li',{class:'item',value:'cd'},['王力宏']),
  createElement('li',{class:'item'},['阿妹']),
])
// 比较两棵DOM树，找出差异(diff)，交给浏览器  diff算法 + 树的遍历  
// console.log(VirtualDOM);

let el = render(VirtualDOM); // 渲染 内存中 createElement(tag)
// console.log(el);
// Element树 -> Tag树  
renderDOM(el,document.getElementById('root'))
let patches = diff(VirtualDOM,virtualDOM2);

console.log(patches);
// 去旧虚拟DOM 生成的界面上打补丁
patch(el,patches)
